<!--
 *搜索组件进化版
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-03-05 19:25:44
 * @LastEditTime: 2021-04-06 11:11:21
 * @FilePath: \小程序d:\课堂\课堂\个人\Vue\哇麦游戏后台\vue\1.vue全站管理系统\vue_shop\src\components\common\SearchCommon2.vue
-->
<template>
    <div>
        <el-card>
            <el-input
                v-model="queryFrom.queryName"
                clearable
                @clear="getSearch"
                placeholder="搜索"
                width="10px"
                >
                <el-button
                @click="getSearch"
                slot="append"
                icon="el-icon-search"
                ></el-button>
            </el-input>
        </el-card>
    </div>
</template>
<script>


export default {
    data(){
        return{
            queryFrom:{
                queryName:""//根据的名称
            },   
        }
    },
    methods:{
         //搜索用户事件
         getSearch(){
            console.log(this.queryFrom.queryName);
            if(this.queryFrom=="") return this.$message.warning("你还没输入内容")
            this.$emit("searchName",this.queryFrom.queryName.trim())      
             
        }
    }

}
</script>
<style lang="less" scoped>
.el-input{
    width: 300px;
    margin-bottom: 5px;
}
.el-card{
    margin-bottom: 10px;
}
</style>